<template>
    <div class="module4">
        <div class="leftContainer">
            <header>
                <h2>驿站信息</h2>
            </header>
            <div style="position: relative">
                <svg width="30px" height="30px" style="position: absolute; left: 0; top: 0">
                    <polygon points="30,0 20,0 0,20 0,30 1,30 1,19 19,1 30,1" fill="#4BBEFA" stroke="#4BBEFA" stroke-width="2"></polygon>
                </svg>
                <svg width="30px" height="30px" style="position: absolute; left: 0; bottom: 0; transform: rotate(-90deg)">
                    <polygon points="30,0 20,0 0,20 0,30 1,30 1,19 19,1 30,1" fill="#4BBEFA" stroke="#4BBEFA" stroke-width="2"></polygon>
                </svg>
                <svg width="30px" height="30px" style="position: absolute; right: 0; bottom: 0; transform: rotate(-180deg)">
                    <polygon points="30,0 20,0 0,20 0,30 1,30 1,19 19,1 30,1" fill="#4BBEFA" stroke="#4BBEFA" stroke-width="2"></polygon>
                </svg>
                <svg width="30px" height="30px" style="position: absolute; right: 0; top: 0; transform: rotate(90deg)">
                    <polygon points="30,0 20,0 0,20 0,30 1,30 1,19 19,1 30,1" fill="#4BBEFA" stroke="#4BBEFA" stroke-width="2"></polygon>
                </svg>
                <p>
                    <span>驿站</span>
                    <span>充电桩数量</span>
                    <span>报警次数</span>
                </p>
                <ul>
                    <li>
                        <span>金凯地小区</span>
                        <div>
                            <span>20</span>
                        </div>
                        <div>
                            <div style="width: 25%"></div>
                            <span>3</span>
                        </div>
                    </li>
                    <li>
                        <span>尖家兜小区</span>
                        <div>
                            <span>30</span>
                        </div>
                        <div>
                            <div style="width: 15%"></div>
                            <span>4</span>
                        </div>
                    </li>
                    <li>
                        <span>浔溪秀城小区</span>
                        <div>
                            <span>25</span>
                        </div>
                        <div>
                            <div style="width: 40%"></div>
                            <span>10</span>
                        </div>
                    </li>
                </ul>
                <!-- <dv-scroll-board :config="leftConfig" style="width:100%;height:98%" /> -->
            </div>
        </div>
        <div class="rightContainer">
            <header>
                <h2>违规车辆记录</h2>
            </header>
            <div style="position: relative">
                <svg width="30px" height="30px" style="position: absolute; left: 0; top: 0">
                    <polygon points="30,0 20,0 0,20 0,30 1,30 1,19 19,1 30,1" fill="#4BBEFA" stroke="#4BBEFA" stroke-width="2"></polygon>
                </svg>
                <svg width="30px" height="30px" style="position: absolute; left: 0; bottom: 0; transform: rotate(-90deg)">
                    <polygon points="30,0 20,0 0,20 0,30 1,30 1,19 19,1 30,1" fill="#4BBEFA" stroke="#4BBEFA" stroke-width="2"></polygon>
                </svg>
                <svg width="30px" height="30px" style="position: absolute; right: 0; bottom: 0; transform: rotate(-180deg)">
                    <polygon points="30,0 20,0 0,20 0,30 1,30 1,19 19,1 30,1" fill="#4BBEFA" stroke="#4BBEFA" stroke-width="2"></polygon>
                </svg>
                <svg width="30px" height="30px" style="position: absolute; right: 0; top: 0; transform: rotate(90deg)">
                    <polygon points="30,0 20,0 0,20 0,30 1,30 1,19 19,1 30,1" fill="#4BBEFA" stroke="#4BBEFA" stroke-width="2"></polygon>
                </svg>
                <dv-scroll-board :config="rightConfig" style="width:100%;height:98%" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "module4",
    data() {
        return {
            leftConfig: {
                header: ["驿站", "充电桩数量", "报警次数"],
                data: [
                         
                    ["金凯地小区", 200, 10],
                    ["尖家兜小区", 200, 10],
                    ["浔溪秀城小区", 200, 10],
                    ["金凯地小区", 200, 10],
                    ["尖家兜小区", 200, 10],
                    ["浔溪秀城小区", 200, 10],
                    ["金凯地小区", 200, 10],
                    ["尖家兜小区", 200, 10],
                    ["浔溪秀城小区", 200, 10],
                    ["金凯地小区", 200, 10],
                    ["尖家兜小区", 200, 10],
                ],
                headerBGC: "rgba(255,255,255,0)",
                oddRowBGC: "rgba(255,255,255,0)",
                evenRowBGC: "rgba(255,255,255,0)",
                rowNum: 8,
                align: ["center", "center", "center"],
                carousel: "single",
                headerHeight: 35
            },
            rightConfig: {
                header: ["驿站", "治理内容", "治理时间"],
                data: [
                    ["金凯地小区", "违停", "2021-01-23 14:40"],
                    ["尖家兜小区", "飞线", "2021-02-23 18:30"],
                    ["浔溪秀城小区", "久停", "2021-03-20 15:25"],
                    ["金凯地小区", "久停", "2021-04-28 14:35"],
                    ["尖家兜小区", "久停", "2021-05-29 16:32"],
                    ["浔溪秀城小区", "违停", "2021-06-03 15:23"],
                    ["金凯地小区", "飞线", "2021-06-16 15:58"],
                    ["尖家兜小区", "违停", "2021-06-05 17:00"],
                    ["浔溪秀城小区", "飞线", "2021-06-13 14:37"],
                    ["浔溪秀城小区", "违停", "2021-06-14 18:00"],
                    ["金凯地小区", "飞线", "2021-06-15 18:45"],
                    ["浔溪秀城小区", "飞线", "2021-06-21 14:00"],
                    ["金凯地小区", "违停", "2021-06-00 18:25"],
                    ["浔溪秀城小区", "飞线", "2021-06-21 14:00"],
                    ["金凯地小区", "飞线", "2021-06-22 18:36"]
                ],
                headerBGC: "rgba(255,255,255,0)",
                oddRowBGC: "rgba(255,255,255,0)",
                evenRowBGC: "rgba(255,255,255,0)",
                rowNum: 8,
                align: ["center", "center", "center"],
                carousel: "single",
                headerHeight: 35
            }
        }
    }
}
</script>

<style scoped>
.module4 {
    height: 100%;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
}
.module4 >div {
    width: 48%;
    display: flex;
    flex-direction: column;
}
.module4 >div >div {
    flex: 1;
}
.module4 >div header {
    padding: 12px 0 12px 12px;
}
.module4 >div header h2 {
    color: #fff;
    font-size: 18px;
    position: relative;
}
.module4 >div header h2::after {
    content: "";
    display: block;
    width: 4px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -12px;
    background-color: #02C6FF;
}
.leftContainer >div {
    display: flex;
    flex-direction: column;
	font-size: 14px;
}
.leftContainer >div >p {
    color: #02A6E5;
    padding: 12px 0;
    display: flex;
    text-align: center;
}
.leftContainer >div >p span {
    flex: 7;
}
.leftContainer >div >p span:nth-of-type(1) {
    flex: 3;
}
.leftContainer >div >p span:nth-of-type(2) {
    flex: 3;
}
.leftContainer >div ul {
    flex: 1;
}
.leftContainer >div ul li {
    display: flex;
	padding: 6px 0;
}
.leftContainer >div ul li >span {
	flex: 3;
	text-align: center;
}
.leftContainer >div ul li >span:nth-of-type(1) {
	color: #FFFFFF;
}
.leftContainer >div ul li >div:nth-of-type(1) {
	flex: 3;
    text-align: center;
}
.leftContainer >div ul li >div:nth-of-type(1) span{
    color: #1BBEEE;
	display: inline-block;
    width: auto;
    padding: 0 6px;
    border: 1px solid #4E93F9;
    background: rgba(0, 0, 0, 0.2);
}
.leftContainer >div ul li >div:nth-of-type(2) {
	flex: 7;
    display: flex;
    justify-content: space-between;
}
.leftContainer >div ul li >div:nth-of-type(2) div {
    height: 100%;
    border-radius: 14px;
    background-color: #399afe;
}
.leftContainer >div ul li >div:nth-of-type(2) span {
    color: #80AFC6;
    padding: 0 12px;
}
</style>